<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>YSL圣罗兰美妆官方网站 - 着我装者,着我妆</title>
    <link rel="stylesheet" href="/css/head/login.css" />
    <link rel="stylesheet" href="/css/assets/reset.css" />
    <link rel="stylesheet" href="/css/fangCSS/LinkFour.css" />
    <link rel="stylesheet" href="/css/assets/swiper-bundle.min.css" />
    <link rel="stylesheet" href="/css/head/header.css" />
    <link rel="stylesheet" href="/css/foot/footer.css" />
    <link rel="stylesheet" href="/css/assets/swiper-bundle.min.css" />
    <link rel="stylesheet" href="/css/assets/bootstrap.min.css" />
  </head>

  <body>
    <!--头部内容(龙)-->
    <div id="header"></div>
    <!--主体内容(this)-->
    <!-- ----------------------------------------- -->
    <!-- 顶部图 -->
    <div class="pic w-100">
      <!-- 01.webp -->
      <img
        src="/images/Brand Story/Link/04/01.webp"
        alt="LP-COMMITMENTS-STORY-1"
      />
    </div>
    <div>
      <!-- 主体部分 -->
      <div class="pic-n w-100">
        <!--02.webp  -->
        <img
          src="/images/Brand Story/Link/04/02.webp"
          alt="LP-COMMITMENTS-STORY-1"
        />
      </div>
      <!-- 03.webp -->
      <div class="pic-1 w-100">
        <img
          src="/images/Brand Story/Link/04/03.webp"
          alt="LP-COMMITMENTS-STORY-1"
        />
      </div>
      <!-- 04.webp -->
      <div class="pic-2 w-100">
        <img
          src="/images/Brand Story/Link/04/04.webp"
          alt="LP-COMMITMENTS-STORY-1"
        />
      </div>
      <!-- 05.webp -->
      <div class="pic-3 w-100">
        <img
          src="/images/Brand Story/Link/04/05.webp"
          alt="LP-COMMITMENTS-STORY-1"
        />
      </div>
      <!-- 06.webp -->
      <div class="pic-4 w-100">
        <img
          src="/images/Brand Story/Link/04/06.webp"
          alt="LP-COMMITMENTS-STORY-1"
        />
      </div>
      <!-- 07.webp -->
      <div class="pic-5 w-100">
        <img
          src="/images/Brand Story/Link/04/07.webp"
          alt="LP-COMMITMENTS-STORY-1"
        />
      </div>
      <!-- 中部动画部分 -->
      <div class="swiper-content por">
        <div class="swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="/images/Brand Story/Link/04/08-2013PC.webp" />
            </div>
            <div class="swiper-slide">
              <img src="/images/Brand Story/Link/04/09-2015PC.webp" />
            </div>
            <div class="swiper-slide">
              <img src="/images/Brand Story/Link/04/10-2016PC.webp" />
            </div>
            <div class="swiper-slide">
              <img src="/images/Brand Story/Link/04/11-2017PC.webp" />
            </div>
            <div class="swiper-slide">
              <img src="/images/Brand Story/Link/04/12-2018PC.webp" />
            </div>
            <div class="swiper-slide">
              <img src="/images/Brand Story/Link/04/13-2019PC.webp" />
            </div>
            <div class="swiper-slide">
              <img src="/images/Brand Story/Link/04/14-2020PC.webp" />
            </div>
          </div>
          <!-- 分页器 -->
          <div class="swiper-pagination"></div>
          <div
            class="swiper-button-prev swiper-button-black swiper-button-disabled"
          ></div>
          <div class="swiper-button-next swiper-button-black"></div>
        </div>
      </div>
      <!-- 15.webp -->
      <div class="pic-6 w-100">
        <img
          src="/images/Brand Story/Link/04/15.webp"
          alt="LP-COMMITMENTS-STORY-1"
        />
      </div>
      <!-- 16.webp -->
      <div class="pic-7 w-100">
        <img
          src="/images/Brand Story/Link/04/16.webp"
          alt="LP-COMMITMENTS-STORY-1"
        />
      </div>
      <!-- 17.webp跳转部分 -->
      <div class="pic-8 w-100">
        <img
          src="/images/Brand Story/Link/04/17.webp"
          alt="LP-COMMITMENTS-STORY-1"
        />
        <div class="none-k">
          <a
            href="https://www.yslbeautycn.com/landingpage/LP-COMMITMENTS-STORY-1"
          >
            <div></div>
          </a>
          <a
            href="https://www.yslbeautycn.com/landingpage/LP-COMMITMENTS-STORY-3"
          >
            <div></div>
          </a>
          <a
            href="https://www.yslbeautycn.com/landingpage/LP-COMMITMENTS-STORY-2"
          >
            <div></div>
          </a>
        </div>
      </div>
      <!-- pic-9.webp -->
      <div class="pic-9 w-100">
        <img
          src="/images/Brand Story/Link/04/18.webp"
          alt="LP-COMMITMENTS-STORY-1"
        />
      </div>
      <!-- 19.webp跳转部分 -->
      <div class="pic-10 w-100">
        <img
          src="/images/Brand Story/Link/04/19.webp"
          alt="LP-COMMITMENTS-STORY-1"
        />
        <div class="none-h">
          <a
            href="https://www.yslbeautycn.com/landingpage/LP-COMMITMENTS-CATEGORY-1"
          >
            <div></div>
          </a>
          <a
            href="https://www.yslbeautycn.com/landingpage/LP-COMMITMENTS-CATEGORY-2"
          >
            <div></div>
          </a>
          <a
            href="https://www.yslbeautycn.com/landingpage/LP-COMMITMENTS-CATEGORY-3"
          >
            <div></div>
          </a>
        </div>
      </div>
    </div>
    <!-- ----------------------------------------- -->
    <!--底体内容(龙)-->
    <div id="footer"></div>
  </body>
  <script src="/js/assets/jquery.js"></script>
  <script src="/js/assets/bootstrap.bundle.min.js"></script>
  <script src="/js/assets/swiper-bundle.min.js"></script>
  <script src="/js/head/header.js"></script>
  <script src="/js/head/footer.js"></script>
  <script src="/js/head/login.js"></script>
  <script>
    var mySwiper = new Swiper(".swiper", {
      // direction: 'vertical', // 垂直切换选项
      loop: false, // 循环模式选项
      slidesPerView: 3,

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });
  </script>
</html>
